<template>
  <div>
    <div class="queryBox">
      <el-input
        v-model.trim="searchModel.carNo"
        placeholder="请输入车牌号"
        @blur="queryData"
      />
    </div>
    <el-tabs @tab-click="switchTab">
      <el-tab-pane
        v-for="item in stateOptions"
        :key="item.label"
        :label="item.label"
        :name="item.index"
        stretch
      >
        <div
          class="content"
          v-infinite-scroll="slide"
          :infinite-scroll-distance="40"
          v-if="tableData.data.length > 0"
        >
          <div class="orderBox" v-for="data in tableData.data" :key="data.id">
            <span>
              {{ "退款日期：" + data.createTime }}
            </span>
            <span>
              {{ data.carNo ? "车牌号：" + data.carNo : "车牌号：" }}
            </span>
            <span>
              {{ "用户ID：" + data.userId }}
            </span>
            <span>
              {{ "套餐名称：" + data.packName }}
            </span>
            <span>
              {{ "扣款金额：" + data.price }}
            </span>
            <span>
              {{ "退款金额：" + data.refundAmt }}
            </span>
            <span>
              {{ "一级代理商姓名：" + data.firstMasterName }}
            </span>
            <span>
              {{ "状态：" + judgeState(data) }}
            </span>
          </div>
        </div>
        <div class="none-data" v-else>
          <image
            src="../../../assets/img/noData.png"
            class="none-data-image"
          ></image>
          <text class="none-data-text"> 没有查询到订单... </text>
          <div></div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { findRefundNewApi } from "../../../api/index";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 分页列表数据
let tableData: any = reactive({ data: [] });
const totalNum = ref(0);
const page = ref(1);
let size = 6;

const dialogVisible = ref(false);
const reason = ref("");

// 搜索模型
const searchModel: any = reactive({
  carNo: null,
  state: null,
  userId: null,
  series: null,
  packName: null,
  agentId: null,
  createDate: null,
  startTime: null,
  endTime: null,
  userName: null,
  carType: null,
  firstMasterId: null,
  firstMasterName: null,
  agentNamenull: null,
  pageNum: page,
  pageSize: size,
});

// 状态枚举
const stateOptions: any = reactive([
  {
    value: null,
    label: "全部",
    index: null,
  },
  {
    value: "0",
    label: "退款中",
    index: "1",
  },
  {
    value: "1",
    label: "退款失败",
    index: "2",
  },
  {
    value: "2",
    label: "退款成功",
    index: "3",
  },
]);

const reasonClick = (row) => {
  reason.value = row.reason;
  dialogVisible.value = true;
};

// 判断状态显示
const judgeState = (row) => {
  switch (row.state) {
    case 0:
      return "退款中";
    case 1:
      return "退款失败";
    case 2:
      return "退款成功";
    default:
      return "";
  }
};

// 判断颜色显示
const judgeColor = (row) => {
  switch (row.carColor) {
    case 1:
      return "黄色";
    case 2:
      return "蓝色";
    case 3:
      return "渐变绿色";
    case 4:
      return "黄绿双";
    default:
      return "";
  }
};

// 查询退款订单
const findOrder = (searchModel) => {
  searchParmSearch();
  findRefundNewApi(searchModel).then((res) => {
    if (res.data.code === 2000 && res.data.data.items) {
      tableData.data = [...tableData.data, ...res.data.data.items];
    } else {
      ElMessage({
        message: "查询失败.",
        type: "error",
        offset: window.screen.height / 4,
      });
    }
  });
};

// 搜索参数检查
const searchParmSearch = () => {
  Object.keys(searchModel).forEach((key) => {
    if (searchModel[key] === "" || searchModel[key] === undefined) {
      searchModel[key] = null;
    }
  });
};

function switchTab(val) {
  // console.log(val.props);
  tableData.data.length = 0;
  switch (val.props.label) {
    case "全部":
      searchModel.state = null;
      break;
    case "退款中":
      searchModel.state = 0;
      break;
    case "退款失败":
      searchModel.state = 1;
      break;
    case "退款成功":
      searchModel.state = 2;
      break;
    default:
      searchModel.state = null;
      break;
  }
  page.value = 1;
  findOrder(searchModel);
}

const slide = pinia.debounce(() => {
  if (tableData.data.length != 0) {
    page.value += 1;
    findOrder(searchModel);
  }
});

function queryData() {
  tableData.data.length = 0;
  page.value = 1;
  findOrder(searchModel);
}

onMounted(() => {
  findOrder(searchModel);
});
</script>
<style scoped lang="less">
.queryBox {
  padding: 0 20px;
  .el-input {
    margin-top: 10px;
  }
}
.content {
  box-sizing: border-box;
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
  padding: 10px 18px;
  .orderBox {
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    border-radius: 18px;
    box-shadow: 3px 4px 6px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    padding: 12px;
    display: flex;
    flex-direction: column;

    span {
      padding: 3px 0;
      color: #3c3c3c;
      font-weight: 400;
      font-size: 14px;
    }
    .divider {
      width: 100%;
      border-bottom: 1px solid #e6e6e6;
      margin: 10px 0;
    }
    .btnBox {
      display: flex;
      justify-content: flex-end;
    }
  }
}

.none-data {
  display: flex;
  justify-content: center;
  width: 380rpx;
  height: 380rpx;
  flex-direction: column;
  margin: 0 auto;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;

  .none-data-image {
    height: 100%;
    width: 100%;
    background-size: 100%;
  }

  .none-data-text {
    margin-top: 8rpx;
    text-align: center;
    color: #666666;
    font-weight: 400;
    font-size: 28rpx;
  }
}

:deep(.el-tabs__nav-scroll) {
  display: flex;
  justify-content: center;
}

.el-tabs--card {
  height: calc(100vh - 100px);
  /* overflow-y: auto; */
}
.el-tab-pane {
  height: calc(100vh - 100px);
  overflow-y: auto;
}
</style>
